<template>
  <div class="ConstantsTwoContainer">
    <bcb_220>
      <div class="ConstantsTwoMain">
        <cstheader
          :title="msg.title1"
          :en-title="msg.enSubTitle1"
          class="cstSubT1"
        />

        <div class="ConstantsTwoCard1">
          <cards1 />
        </div>

        <cstheader
          :title="msg.title2"
          :en-title="msg.enSubTitle2"
          class="cstSubT1"
        />

        <div class="ConstantsTwoMoreC">
          <btn_a
            :title="i18nt.buttons.more2"
            color="#A3A3A3"
            font-size="18px"
          />
        </div>

        <div class="ConstantsTwoCard2">
          <cards2 />
        </div>

        <cstheader
          :title="msg.title3"
          :en-title="msg.enSubTitle3"
          class="cstSubT1"
        />

        <div class="ConstantsTwoMoreC">
          <btn_a
            :title="i18nt.buttons.more2"
            color="#A3A3A3"
            font-size="18px"
          />
        </div>

        <div class="ConstantsTwoCard3">
          <cards3 />
        </div>

        <cstheader
          :title="msg.title4"
          :en-title="msg.enSubTitle4"
          class="cstSubT1"
        />

        <div class="ConstantsTwoMoreC">
          <btn_a
            :title="i18nt.buttons.more2"
            color="#A3A3A3"
            font-size="18px"
          />
        </div>

        <div class="ConstantsTwoCard4">
          <cards4 />
        </div>
      </div>
    </bcb_220>
  </div>
</template>

<script setup lang="ts">
import { i18nt } from "@/i18n";
import cstheader from "./sub/_1cstheader.vue";
import btn_a from "@/components/buttons/btn_a.vue";
import cards1 from "./sub/cardgp1.vue";
import cards2 from "./sub/cardgp2.vue";
import cards3 from "./sub/cardgp3.vue";
import cards4 from "./sub/cardgp4.vue";

const msg = i18nt.value.constantsTwo;
</script>

<style scoped lang="scss">
.ConstantsTwoContainer {
  @include rel_cen_hw;
  background: #ffffff;
}

.ConstantsTwoMain {
  @include relative_hw;

  flex-direction: column;
  align-items: center;
  .cstSubT1 {
    margin-top: 70px;
  }

  .ConstantsTwoMoreC {
    @include relative_hw(25px, 100%);
    margin-top: 15px;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
  }

  .ConstantsTwoCard1 {
    @include relative_hw(219px, 100%);
    margin-top: 50px;
  }

  .ConstantsTwoCard2 {
    @include relative_hw(470px, 100%);
    margin-top: 15px;
  }

  .ConstantsTwoCard3 {
    @include relative_hw(309px, 100%);
    margin-top: 22px;
  }

  .ConstantsTwoCard4 {
    @include relative_hw(386px, 100%);
    margin-top: 21px;
  }
}
</style>
